import React, { Component, PropTypes } from 'react';
import Relay from 'react-relay';
import { Button, Modal } from 'antd';
import Page from '../Page/PageComponent';
import constants from './Constants';
import APForm from '../Form/Form';
import AddSsidMutation from '../../relay/Config/AddSsidMutation';

class ProfileDetailComponent extends Component {
  constructor(props, context) {
    super(props);
    this.context = context;
    this.state = {
      showNewSsidModal: false,
      showNewVlanModal: false,
    };
    this.props.relay.setVariables({ profileId: this.props.params.profileId });
  }

  render() {
    const { viewer } = this.props;
    if (!viewer || !viewer.profile){
      return null
    }
    const { profile } = viewer;
    console.log(profile)
    return (
      <Page heading="profile详情">
        <div>{profile.name}</div>
        {
          constants.checkFields.map(field => field.name).map(k => (
            <div>{`${profile[k] ? '已' : '未'}${constants.checkFields.find(field => field.name === k).label}`}</div>
          ))
        }
        <div>
          {
            profile.ssids.edges.map(ssid => (
              <div>
                <div>{ssid.node.name}</div>
              </div>
            ))
          }
          <Button
            onClick={() => this.setState({ showNewSsidModal: true })}
          >增加ssid</Button>
          <Modal
            title="新增ssid"
            visible={this.state.showNewSsidModal}
            footer={null}>
            <APForm
              viewer={viewer}
              mutation={AddSsidMutation}
              mutationData={{payload: { profile_id: profile.id, }}}
              fields={constants.ssidInputFields}
              checkFields={constants.ssidCheckFields}
              selectFields={constants.ssidSelectFields}
              onSubmit={() => {this.setState({ showNewSsidModal: false })}}
              onCancel={() => {this.setState({ showNewSsidModal: false })}}
            />
          </Modal>

        </div>

        <div>
          <Button
            onClick={() => this.setState({ showNewSsidModal: true })}
          >增加vlan</Button>
          <Modal
            title="新增vlan"
            visible={this.state.showNewVlanModal}
            footer={null}>
            <APForm
              viewer={viewer}
              onSubmit={() => {this.setState({ showNewVlanModal: false })}}
              onCancel={() => {this.setState({ showNewVlanModal: false })}}
            />
          </Modal>
        </div>
      </Page>
    )
  }
}

export default Relay.createContainer(ProfileDetailComponent, {
  initialVariables: {
    profileId: "UHJvZmlsZToy",
    defaultFirst: 1000,
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        profile(id: $profileId){
          id
          name
          autoUpdate
          isolate
          wtpRepEnable
          ssidRepEnable
          flowRepPeriod
          rateLimit
          vlanEnable
          fwDefaultEnable
          fwZoneEnable
          fwTrafficEnable
          ssids(first: $defaultFirst){
            edges{
              node{
                name
                auth
                cipher
                ishide
                name
              }
            }
          }
        }
      }
    `
  }
});
